<template>
  <xl-login ref="loginchild"></xl-login>
  <view v-if="userToken.token" style="position: relative">
    <view class="getData" v-if="loading">
      <uv-loading-icon mode="circle" size="18"></uv-loading-icon>
      <view style="margin-left:15rpx;">正在获取最新消息...</view>
    </view>
    <view class="messageBox">
      <z-paging ref="paging" v-model="dataList" use-chat-record-mode safe-area-inset-bottom bottom-bg-color="#f8f8f8"
                @query="queryList" :auto-clean-list-when-reload="false">
        <view v-for="(item,pki) in dataList" class="message-item">
          <view class="time">{{ item.create_time }}</view>
          <view class="messageMain">
            <view class="title" v-if="item.ftype==1">
              <image :src="xitong" class="img"/>
              系统消息
            </view>
            <view class="title" v-else-if="item.ftype==2">
              <image :src="shensu" class="img"/>
              申诉消息
            </view>
            <view class="contents" v-if="item.ftype==1">
              <view v-if="item.type==3">
                <view class="typetitle">延期申请</view>
                <view class="sysBox1">留言
                  <text class="title-a">{{ item.title }}</text>
                  申请延期至
                  <text class="jj">{{ item['pass_text']['endTime'] }}</text>
                  请求已被拒绝
                </view>
                <view class="reason">
                  <uv-icon name="info-circle-fill" color="#f56c6c"/>&nbsp;理由：{{ item.pass_text.text }}
                </view>
              </view>
              <view v-if="item.type==4">
                <view class="typetitle">延期申请</view>
                <view class="timef">{{ item.create_time }}</view>
                <view class="sysBox1">留言
                  <text class="title-a">{{ item.title }}</text>
                  申请延期至
                  <text class="jj">{{ item['pass_text']['endTime'] }}</text>
                  已通过
                </view>
              </view>
              <view v-else-if="item.type==2">
                <view class="typetitle">转派申请</view>
                <view class="sysBox1">留言
                  <text class="title-a">{{ item.title }}</text>
                  申请转派至
                  <text class="jj">{{ item['pass_text']['to'] }}</text>
                  ，已被退回
                </view>
                <view class="reason">
                  <uv-icon name="info-circle-fill" color="#f56c6c"/>&nbsp;理由：{{ item.pass_text.text }}
                </view>
              </view>
              <view v-else-if="item.type==1">
                <view class="typetitle">转派申请</view>
                <view class="timef">{{ item.create_time }}</view>
                <view class="sysBox1">留言
                  <text class="title-a">{{ item.title }}</text>
                  申请转派至
                  <text class="jj">{{ item['pass_text']['to'] }}</text>
                  ，已同意
                </view>
              </view>

            </view>
            <view class="contents" v-else-if="item.ftype==2">
              <view class="typetitle"> {{ item.message }}</view>
            </view>
            <uv-cell-group v-if="item.ftype==1">
              <uv-cell title="查看更多" isLink @click="goView(item.wid)"></uv-cell>
            </uv-cell-group>
          </view>

        </view>
      </z-paging>
    </view>
  </view>
  <view v-else style="padding:50rpx;">

    <uv-empty mode="page" :icon="emptyPng" width="128" height="128" text="你还未登录"></uv-empty>
    <view style="margin-top:80rpx;">
      <uv-button type="primary" :plain="true" text="立即登录" icon="account"
                 icon-color="#3c9cff" size="normal" @click="goLogin"></uv-button>
    </view>

  </view>
</template>

<script setup>
import {
  useToken
} from "@/stores/userStores";
import {ref, reactive} from "vue"
import {onLoad, onShow} from '@dcloudio/uni-app'
import View from "@/pages/thread/view.vue";
import {getMyMessage} from '@/common/user'
import emptyPng from "@/static/icon/emptyData.png"
import shensu from '@/static/icon/shensu.png'
import xitong from '@/static/icon/xitong.png'

const userToken = useToken();
const dataList = ref([]);
const paging = ref(null);
const goLogin = () => {
  uni.navigateTo({
    url: '/pages/user/login'
  })
}

const loading = ref(true)
const goView = (wid) => {
  uni.navigateTo({
    url: `/pages/thread/view?wid=${wid}`
  })
}

  const queryList = (pageNo, pageSize) => {
    const params = {
      page: pageNo,
    }
    getMyMessage(params).then(r => {
      paging.value.complete(r.data);
      loading.value = false
    }).catch(e => {
      loading.value = false
    })
  }
onShow(options => {
  // if (userToken.token == '' || !userToken.token) {
  //   //去登录
  //   uni.navigateTo({
  //     url: '/pages/user/login'
  //   })
  // } else {
  //   paging.value.reload();
  //   loading.value = true
  // }
})

</script>


<style scoped lang="scss">
.message-item {
  margin: 30rpx;
  transform: scaleY(-1);

  .title {
    border-bottom: 1px solid #d6d7d9;
    padding: 30rpx;
    display: flex;
    aglign-items: center;

    .img {
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
    }
  }

  .typetitle {
    margin-bottom: 25rpx;
    font-size: 34rpx;
    font-weight: bold;
  }

  .timef {
    color: #888;
    margin-bottom: 25rpx;
    margin-top: 5rpx;
  }

  .contents {
    padding: 30rpx;
    font-size: 28rpx;

    .reason {
      background: #fef0f0;
      color: #f56c6c;
      font-size: 25rpx;
      padding: 14rpx;
      margin: 10rpx 0;
      display: flex;
    }

    .sysBox1 {
      .title-a, .jj {
        color: $baseColor;
        margin: 0 4rpx;
      }
    }
  }

  .time {
    background: rgba(0, 0, 0, .1);
    color: #fff;
    align-items: center;
    border-radius: 5rpx;
    padding: 8rpx 15rpx;
    text-align: center;
    margin: 0 auto;
    margin-top: 50rpx;
    margin-bottom: 20rpx;
    font-size: 24rpx;
    //长度自适应
    width: fit-content;
  }

  .messageMain {
    background: #fff;
    border-radius: 20rpx;
  }
}

.getData {
  color: #f9ae3d;
  background: #fdf6ec;
  position: sticky;
  top: 0;
  width: 100%;
  justify-content: center;
  padding: 20rpx 0;
  align-items: center;
  display: flex;
  z-index: 1000;
}
</style>
